import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control
import MyCmponents from './components/MyCmponents'
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)

// 按需导入并设置
// import { imgerror, red, skyblue } from '@/directives'
// Vue.directive('imgerror', imgerror)
// Vue.directive('red', red)
// Vue.directive('skyblue', skyblue)

// 基本注册
// import { imgerror, color } from '@/directives'
// // 定义全局的自定义指令
// Vue.directive('imgerror', imgerror)
// Vue.directive('color', color)

// 批量注册
// import * as directives from '@/directives'

// ----------------- 批量注册所有指令-----------
// * 表示所有的意思 按需导入所有按需导出的对象
import * as allDirectives from '@/directives'
// console.log(allDirectives) 这个对象中存储了 directives模块导出的三个指令
// for in遍历的方式可以 循环对象
// for (const k in allDirectives) {
//   // k是键  allDirectives[k] 是值
//   console.log(k, allDirectives[k])
//   Vue.directive(k, allDirectives[k])
// }

// console.log(Object.keys(allDirectives)) // ["imgerror", "red", "yellow"]
Object.keys(allDirectives).forEach(k => {
  Vue.directive(k, allDirectives[k])
})

// 定义全局的自定义指令
// 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
Vue.directive('imgerror', {
  // el 指令所在的元素
  // binding 指令的相关信息对象, binding.value 指令的值
  inserted(el, binding) {
    console.log(el, binding)
    el.onerror = function() {
      // console.log('图片加载失败') ,设置了备用地址
      el.src = binding.value
    }
  }
})

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
Vue.use(ElementUI, {})
Vue.use(MyCmponents)
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

// import request from './utils/request'
// Vue.prototype.request = request // 在Vue的原型对象上挂载了一个属性的request,值就是axios实例
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
